<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <style>

        #favorites_wrapper {
            overflow: hidden;
        }

        #favorites_wrapper ul {
            /*padding-bottom: 15px;*/
            background-color: white;
        }

        #favorites_wrapper ul li {
            /*padding-bottom: 15px;*/
            border-top: 1px solid rgba(0, 0, 0, .12);
            border-bottom: 1px solid rgba(0, 0, 0, .12);
            padding-left: 13px;
        }

    </style>

</head>

<script>

    loadcss('css/zufang.css');

</script>

<body>

<div style="background-color: #ddd;width: 100%;height: 100%;">


    <div id="favorites_wrapper">

        <ul>
        </ul>

    </div>
</div>

</body>


<script>

    //将订单列表加载进orders
    loadmultiplejs(['https://cdn.staticfile.org/iScroll/5.2.0/iscroll.min.js', 'js/touchslider.js']
        , function () {

            //订单高度
            $('#favorites_wrapper').height($(window).height() - 55);

            //页面滚动
            let is = new IScroll('#favorites_wrapper', {
                scrollbars: false,
                mouseWheel: false,
                interactiveScrollbars: false,
                shrinkScrollbars: 'scale',
                fadeScrollbars: false,
                scrollY: true,
                probeType: 1,
                bindToWrapper: true,
                click: true,
            });

            //手机端无法滑动问题.
            document.addEventListener('touchmove', function (e) {
                e.preventDefault();
            }, {
                capture: true,
                passive: false
            });

            is.refresh();

            function append_favoriteRoom(room) {

                let id = 'favorite_room_' + room.id;

                let pic;


                if (room.images && room.images.length > 0) {
                    pic = '/resource/preview/4/' + room.images[0] + '.jpg';
                }
                else {
                    pic = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546502159888&di=ba8195972eb78359422bb19a4e6b59d1&imgtype=0&src=http%3A%2F%2Fp2.so.qhimgs1.com%2Ft01481b7750ea1d245e.png';
                }
                $('#favorites_wrapper ul').append('  <li id=' + id + '>' +
                    '' +
                    '                <div class="content__item   clicked">' +
                    '      <span class="content__item--pic">' +
                    '        <img alt="' + room.location.address + "   " + room.location.detailedDescription + '" class="content__item__aside lazyloaded"' +
                    '             src=' + pic + '>' +
                    '              </span>' +
                    '                    <div class="content__item__main">' +
                    '                        <p class="content__item__title">' +
                    '                            ' + room.name + ' </p>' +
                    '                        <p class="content__item__content">' +
                    room.location.address + "   " + room.location.detailedDescription +
                    '                        </p>' +
                    '                        <p class="content__item__bottom">' +
                    room.prices[0].text +
                    '                            <span class="content__item__bottom--activity"></span>' +
                    '                        </p>' +
                    '' +
                    '                    </div>' +
                    '                </div>' +
                    '' +
                    '' +
                    '            </li>  ');

                is.refresh();

                $('#' + id).click(function () {

                    //当动态页面被关闭时,跳转回收藏页面
                    Event.on('__press_dynamic_page_close_bt', function () {
                        Sp.switchPage('#favorite', "html/favorite.html", true);
                    }, true);


                    //点击那个房源以后

                    //压入一个可回退事件
                    Backs.push(function () {//回退事件的操作为

                        //在动态页面上展示这个房源
                        dynamicPage.display('/tenant/details.html?id=' + room.id);

                        //跳转到查看附近房源那个页面
                        Sp.switchPage('#nearby', "html/nearby.html", true);


                    }, function () {//当用户按下返回按钮

                        //切换回收藏页面
                        Sp.switchPage('#favorite', "html/favorite.html", true);

                        //如果动态页面是开启的则关闭它
                        if (dynamicPage.isShow) {
                            dynamicPage.close();
                        } else {
                            //如果用户已经手动关闭页面,则事件已经失效
                            return true;
                        }

                    });//非跳过事件

                });


            }


            //获取收藏房源
            $.get('/room/favoriteRooms', function (ls) {

                for (let i in ls) {
                    append_favoriteRoom(ls[i]);
                }

            });


            let willAppendRooms = [];

            Event.onDisplay('#favorite', function () {

                for (let i in willAppendRooms) {

                    $.get('/room/get/brief', {id: willAppendRooms[i]}, function (order) {
                        append_favoriteRoom(order);
                    });
                }

                //清空列表
                willAppendRooms = [];
            });

            //添加一个房源
            Event.on('append_favoriteRoom', function (id) {
                willAppendRooms.push(id);
            });


            Event.on('remove_favoriteRoom', function (id) {

                for (let i in willAppendRooms) {

                    if (willAppendRooms[i] === id) {

                        //删除
                        willAppendRooms.splice(i, 1);

                        break;
                    }

                }

                //随后删除元素ul中的li
                $('#favorite_room_' + id).remove();

                is.refresh();

            });

        });


</script>

</html>